<template>
  <div class="Overview">
    <div class="my">
      我的订单
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="orderId" label="订单编号" width="200">
          </el-table-column>
          <el-table-column prop="product.productName" label="商品名称" width="200">
          </el-table-column>
          <el-table-column prop="totalAmount" label="总金额">
          </el-table-column>
          <el-table-column prop="orderNum" label="总数量">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" width="120">
          </el-table-column>
          <el-table-column prop="payStatus" label="支付状态">
          </el-table-column>
          <el-table-column prop="price" label="备注">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            
              <el-button type="text" @click="dialogVisible = true">详情</el-button>
     
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-descriptions title="订单明细">
          <el-descriptions-item label="订单编号"></el-descriptions-item><br>
          <el-descriptions-item label="商品编号"></el-descriptions-item><br>
          <el-descriptions-item label="数量"></el-descriptions-item><br>
          <el-descriptions-item label="单价"></el-descriptions-item><br>
          <el-descriptions-item label="小计"></el-descriptions-item><br>
          <el-descriptions-item label="备注"></el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-tab-pane label="待发货" name="second">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="orderId" label="订单编号" width="200">
          </el-table-column>
          <el-table-column prop="product.productName" label="商品名称" width="200">
          </el-table-column>
          <el-table-column prop="totalAmount" label="总金额">
          </el-table-column>
          <el-table-column prop="orderNum" label="总数量">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" width="120">
          </el-table-column>
          <el-table-column prop="payStatus" label="支付状态">
          </el-table-column>
          <el-table-column prop="price" label="备注">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <el-button type="text" @click="dialogVisible = true">详情</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-descriptions title="用户信息">
          <el-descriptions-item label="下单用户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="商户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="订单编号">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="数量">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="单价">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="备注">
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-tab-pane label="待提货" name="third">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="orderId" label="订单编号" width="200">
          </el-table-column>
          <el-table-column prop="product.productName" label="商品名称" width="200">
          </el-table-column>
          <el-table-column prop="totalAmount" label="总金额">
          </el-table-column>
          <el-table-column prop="orderNum" label="总数量">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" width="120">
          </el-table-column>
          <el-table-column prop="payStatus" label="支付状态">
          </el-table-column>
          <el-table-column prop="price" label="备注">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <el-button type="text" @click="dialogVisible = true">详情</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-descriptions title="用户信息">
          <el-descriptions-item label="下单用户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="商户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="订单编号">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="数量">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="单价">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="备注">
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-tab-pane label="待收货" name="fourth">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="orderId" label="订单编号" width="200">
          </el-table-column>
          <el-table-column prop="product.productName" label="商品名称" width="200">
          </el-table-column>
          <el-table-column prop="totalAmount" label="总金额">
          </el-table-column>
          <el-table-column prop="orderNum" label="总数量">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" width="120">
          </el-table-column>
          <el-table-column prop="payStatus" label="支付状态">
          </el-table-column>
          <el-table-column prop="price" label="备注">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <el-button type="text" @click="dialogVisible = true">详情</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-descriptions title="用户信息">
          <el-descriptions-item label="下单用户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="商户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="订单编号">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="数量">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="单价">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="备注">
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-tab-pane label="已收货" name="pingjia">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="orderId" label="订单编号" width="200">
          </el-table-column>
          <el-table-column prop="product.productName" label="商品名称" width="200">
          </el-table-column>
          <el-table-column prop="totalAmount" label="总金额">
          </el-table-column>
          <el-table-column prop="orderNum" label="总数量">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" width="120">
          </el-table-column>
          <el-table-column prop="payStatus" label="支付状态">
          </el-table-column>
          <el-table-column prop="price" label="备注">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <el-button type="text" @click="dialogVisible = true">详情</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-descriptions title="用户信息">
          <el-descriptions-item label="下单用户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="商户ID">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="订单编号">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="数量">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="单价">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="小计">{{  }}</el-descriptions-item><br>
          <el-descriptions-item label="备注">
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-tabs>

  </div>
</template>

<script>


export default {
  data() {
    return {
      // 控制对话框显示
      dialogVisible: false,
      // 存储订单详情
      orderDetails: null,
      // 订单列表
      tableData: [],
      tableRowClassName: '',
      activeName: 'first',
      classAry: [],
      total: 0,
      order: {
        conveyTag: '',
      },
    }
  },
  methods: {
    async handleClick() {
      try {
        if (this.activeName === 'first') {
          this.order.conveyTag = ''; // 全部  
        } else if (this.activeName === 'second') {
          this.order.conveyTag = 'P001-1'; //待发货
        } else if (this.activeName === 'third') {
          this.order.conveyTag = 'P001-2'; //待提货
        } else if (this.activeName === 'fourth') {
          this.order.conveyTag = 'P001-3'; //待发货
        } else if (this.activeName === 'pingjia') {
          this.order.conveyTag = 'P001-4'; //已发货
        }
        console.log(this.order.conveyTag)
        const res = await this.$http.post(`/buy/order/selectByStatus`, this.order);
        // 假设后端返回的是一个 { data: { list: [], total: 0 } } 结构的响应  
        if (res && res.data) {
          this.tableData = res.data;
          this.total = res.data.total;
        }
      } catch (error) {
        console.error('An error occurred:', error);
        // 在这里添加适当的错误处理逻辑  
      }
    },
    async showOrderDetails(id) {
      try {
        const res = await this.$http.get(`/buy/order/details/${id}`);
        this.orderDetails = res.data; // 假设后端返回的是订单详情数据
        this.dialogVisible = true; // 显示对话框
      } catch (error) {
        console.error('Error fetching order details:', error);
        this.$message.error('获取订单详情失败');
      }
    },
    handleClose(done) {
      // 关闭对话框前的逻辑（如果有）
      done();
    },
  },
  created() {
    this.handleClick();
  },
  handleClick(row) {
    console.log(row);
  },
  handleClose(done) {
    this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => { });
  }
}
</script>
<style scoped>
.Overview {
  background-image: url('@/assets/imgs/main/image2.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.my {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  font-weight: bold;
  font-size: 20px;
}
</style>
